<!-- 循环步骤模态框 -->
<div class="modal fade" id="loopModal" tabindex="-1" aria-labelledby="loopModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="loopModalLabel">循环步骤</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="loop-form">
                    <div class="mb-3">
                        <label for="loop-name" class="form-label">步骤名称</label>
                        <input type="text" class="form-control" id="loop-name" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="loop-type" class="form-label">循环类型</label>
                        <select class="form-select" id="loop-type" required>
                            <option value="for">For循环 (指定次数)</option>
                            <option value="forEach">ForEach循环 (遍历数组)</option>
                            <option value="while">While循环 (条件判断)</option>
                        </select>
                    </div>
                    
                    <div id="for-loop-config" class="loop-config">
                        <div class="mb-3">
                            <label for="for-start" class="form-label">起始值</label>
                            <input type="number" class="form-control" id="for-start" value="0">
                        </div>
                        <div class="mb-3">
                            <label for="for-end" class="form-label">结束值</label>
                            <input type="number" class="form-control" id="for-end" value="10">
                        </div>
                        <div class="mb-3">
                            <label for="for-step" class="form-label">步长</label>
                            <input type="number" class="form-control" id="for-step" value="1">
                        </div>
                        <div class="mb-3">
                            <label for="for-variable" class="form-label">循环变量名</label>
                            <input type="text" class="form-control" id="for-variable" value="i">
                        </div>
                    </div>
                    
                    <div id="forEach-loop-config" class="loop-config" style="display: none;">
                        <div class="mb-3">
                            <label for="forEach-array" class="form-label">数组表达式</label>
                            <input type="text" class="form-control" id="forEach-array" placeholder="例如: context.variables.items">
                        </div>
                        <div class="mb-3">
                            <label for="forEach-variable" class="form-label">循环变量名</label>
                            <input type="text" class="form-control" id="forEach-variable" value="item">
                        </div>
                        <div class="mb-3">
                            <label for="forEach-index" class="form-label">索引变量名</label>
                            <input type="text" class="form-control" id="forEach-index" value="index">
                        </div>
                    </div>
                    
                    <div id="while-loop-config" class="loop-config" style="display: none;">
                        <div class="mb-3">
                            <label for="while-condition" class="form-label">循环条件表达式</label>
                            <textarea class="form-control" id="while-condition" rows="3" placeholder="例如: getVariable('counter') < 10"></textarea>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">循环体步骤</label>
                        <div id="loop-body-container" class="border rounded p-3 steps-container">
                            <div class="alert alert-info">
                                <i class="bi bi-info-circle"></i> 拖动步骤到此处
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="save-loop-btn">保存</button>
            </div>
        </div>
    </div>
</div>